<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style type="text/css">
    .onmouseover {
        border:1px solid bisque;
        color: black;
        cursor: hand;
    }
</style>



<body>
    <p id="htext" onmouseover="func_over()" onmouseout="func_out()">变更前</p>
    <p onmouseover="over()" onmouseout="out()" id="p">鼠标移动到P标签上时，改变文本和边框样式</p>


    <script type="text/javascript">            
        function over() {
            var p = document.getElementById("p");
            //选择器className修改。
            p.className = "onmouseover";
        }
        function out() {
            var p = document.getElementById("p");
            p.className = "";
        }
    </script>




    <script type="text/javascript">
        function func_over() {
            var x = document.getElementById("htext")
            x.className = "onmouseover"
        }
        function func_out() {
            var x = document.getElementById("htext")
            x.className = ""
        }

    </script>
</body>

</html>